import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Empty } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { getBrowseHistory } from '../../utils/storage';

const History = () => {
  const navigate = useNavigate();
  const [history, setHistory] = useState([]);

  useEffect(() => {
    loadHistory();
  }, []);

  const loadHistory = () => {
    const browseHistory = getBrowseHistory();
    setHistory(browseHistory);
  };

  const handleProductClick = (product) => {
    navigate(`/app/product/${product.id}`);
  };

  const groupHistoryByDate = (history) => {
    const groups = {};
    history.forEach(item => {
      const date = new Date(item.browseTime).toLocaleDateString();
      if (!groups[date]) {
        groups[date] = [];
      }
      groups[date].push(item);
    });
    return groups;
  };

  if (history.length === 0) {
    return (
      <div className="history-page">
        <div className="history-header">
          <Button 
            type="text" 
            icon={<ArrowLeftOutlined />}
            onClick={() => navigate(-1)}
          />
          <span className="header-title">浏览历史</span>
        </div>
        
        <div style={{ padding: '40px 16px', textAlign: 'center' }}>
          <Empty 
            description="还没有浏览记录"
            image={Empty.PRESENTED_IMAGE_SIMPLE}
          />
          <Button 
            type="primary" 
            onClick={() => navigate('/app')}
            style={{ marginTop: '16px' }}
          >
            去逛逛
          </Button>
        </div>
      </div>
    );
  }

  const groupedHistory = groupHistoryByDate(history);

  return (
    <div className="history-page">
      {/* 头部导航 */}
      <div className="history-header">
        <Button 
          type="text" 
          icon={<ArrowLeftOutlined />}
          onClick={() => navigate(-1)}
        />
        <span className="header-title">浏览历史</span>
      </div>

      {/* 浏览历史列表 */}
      <div className="history-list">
        {Object.entries(groupedHistory).map(([date, items]) => (
          <div key={date} className="history-group">
            <div className="date-header">{date}</div>
            <div className="history-items">
              {items.map(product => (
                <div 
                  key={`${product.id}-${product.browseTime}`} 
                  className="history-item"
                  onClick={() => handleProductClick(product)}
                >
                  <img 
                    src={product.images[0]} 
                    alt={product.name}
                    className="product-image"
                  />
                  <div className="product-info">
                    <div className="product-name">{product.name}</div>
                    <div className="product-price">¥{product.price}</div>
                    <div className="browse-time">
                      {new Date(product.browseTime).toLocaleTimeString()}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default History; 